<style lang="scss" scoped>
  .item-wrap{
    position: relative;
    width: 355px; height: 150px;
    background: #fff;
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.04);
    border-radius:4px;
    text-align: left;
    cursor: pointer;
    border-color: white;
    border-width: 2px;
    border-style: solid;
  }

  .item-icon{
    position: absolute;
    width:42px;
    height:42px;
    left: 15px; top: 20px;
  }

  .item-name{
    position: absolute;
    height:42px;
    left: 72px; top: 20px;
    line-height: 42px;
    font-size:25px;
    color:rgba(17,17,17,1);
  }

  .item-text{
    position: absolute;
    height:42px;
    left: 72px; top: 61px;
    height:36px;
    font-size:13px;
    color:rgba(85,85,85,1);
    line-height:18px;
  }

  .item-bottom{
    position: absolute;
    width:284px; height: 35px;
    right: 0; bottom: 0;
    border-top:1px dashed rgba(207,207,207,1);
  }

  .item-price{
    position: absolute;
    left: 0; top: 0;
    height: 35px;
    font-size:13px;
    color:rgba(48,54,65,1);
    line-height:35px;
  }

  .item-shopnner{
    position: absolute;
    right: 16px; top: 0;
    height: 35px;
    font-size:13px;
    color:#888888;
    line-height:35px;
  }
</style>

<template>
  <div class="item-wrap" ref="color-box" @click="selectbox" :style="{borderColor: select === true ? '#02BB00' : 'white'}">
    <img src="" class="item-icon">
    <div class="item-name">{{typeName[setType] + (setCount || '')}}</div>
    <div class="item-text">{{typeDesc[setType]}}</div>
    <div class="item-bottom">
      <div class="item-price" v-if="setPrice">¥{{setPrice}}/年</div>
      <div class="item-shopnner" v-if="setDiscount">{{setDiscount}}折，可重复购买</div>
      <div class="item-shopnner" v-else>查看详情</div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        typeName: {
          outframe: '外框',
          inframe: '内框',
          outmatcard: '外衬卡纸',
          middlematcard: '中衬卡纸',
          inmatcard: '内衬卡纸',
          submanager: '子管理员',
          subagent: '微代',
          custom: '自定义'
        },
        typeDesc: {
          outframe: '可根据商户需求拍摄框条并上传',
          inframe: '可根据商户需求拍摄框条并上传',
          outmatcard: '可根据商户需求拍摄卡纸并上传',
          middlematcard: '可根据商户需求拍摄卡纸并上传',
          inmatcard: '可根据商户需求拍摄卡纸并上传',
          submanager: '管理分发任务，团队高效协作',
          subagent: '经销商渠道分发，帮助你拓展更多业务来源',
          custom: '外框、内框、外衬卡纸、中衬卡纸、内衬卡纸，均可按需选购'
        }
      }
    },
    computed:{

    },
    props: {
      setItem: {
        type:Object,
        default() {
          return {}
        }
      },
      select: {
        type:Boolean,
        default() {
          return false
        }
      },
      setType:'',
      setCount: '',
      setPrice: '',
      setDiscount: ''
    },
    methods: {
      outLogin () {
        this.typeDesc.valueOf(this.setType)
      },
      selectbox(){
//          this.$refs['color-box'].style.borderColor='#02BB00'
      }
    },
    mounted () {

    }
  }
</script>
